<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/public.css" media="all">
		<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<link rel="stylesheet" href="../mui/css/mui.min.css" />
		<script src="../mui/js/mui.js"></script>
	</head>
	<script>

			var bid ="";
			
		   function getUrlParam(name) {
		        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
		
		        var bid = window.location.search.substr(1).match(reg);  //匹配目标参数
		
		        if (bid != null) {
					console.log(unescape(bid[2]));
					return unescape(bid[2]);
					}
		
		        return null; //返回参数值
		
		    }

		
		$(function(){
			
			
			let path = "http://localhost:8080/baolema/dish/findAll?bid="+bid;
			
			$.get(path,function(res){
				//删除被选中元素的所有子元素
				$("dishView").empty();
				//显示菜品
				$(res).each(function(index,element){
					$("dishView").append("<input id='dishId' style='display: none;' value='"+element.did+"' />"+
				"<div class='layui-row' id='bus-view' style='height: 150px;  margin-top: 5px; background-color: white;'>"+
					"<div class='layui-col-xs4' style='padding-top: 25px; padding-left: 15px;'>"+
						"<div class='grid-demo' id='dishImg'>"+
							"<img src='../images/"+element.dishImage+"' style='text-align: center; width: 70%;height: 70%;' />"+
						"</div>"+
					"</div>"+
					"<div class='layui-col-xs3'>"+
						"<div class='grid-demo' style='margin: 0 auto; text-align: center;margin-top: 25px;'>"+
							"<div id='dishName' style='font-size: 24px;'>"+element.name+"</div>"+
							"<div class='layui-icon' style='margin-left: 10px;font-size: 11px;'>"+
								"<div id='sales'>月销量："+element.sales+"</div>"+
								"<div style='font-size: 20px;'>&#xe65e;"+
									"<i id='price'>4</i>"+
								"</div>"+
							"</div>"+
						"</div>"+
					"</div>"+
					"<div class='layui-col-xs5' style='margin: 0 auto; text-align: center;margin-top: 50px;'>"+
						"<div class='mui-numbox'>"+
							"<button onclick='delDish()' class='mui-btn mui-btn-numbox-minus' type='button'>-</button>"+
							"<input id='dishNum' class='mui-input-numbox'  type='number'>"+
							"<button onclick='addDish()' class='mui-btn mui-btn-numbox-plus' type='button'>+</button>"+
						"</div>"+
					"</div>"+
				"</div>");
				})
			})
		});


		// 将菜品添加入订单
		function addDish(){
			let dishId1 = $("#dishId").val();
			if($("#dishView").children().length>0){
				let flag=false;//表示菜品未添加至订单中
				// let children = $("#dishView").children().toArray();
				// console.log(children)
				for( let i = 0; i<children.length;i++){
					
					// if(children[i].getElementById("#dishId").val() == dishId1){
					// 	flag = true;//表示菜品已添加至订单中
					// 	break;
					// }
				}
				if(flag){
					$("#dishView2").append($("#dishView").html());
				}
				
			}
			// if(dishId.length != undefined || dishId.length > 0){
			// 	let price = $("#price").text();
			// 	let dishNum = $("#dishNum").val();
			// 	let priceAll = price*dishNum;
			// 	console.log(priceAll);
			// }else{
			// 	$("#dishView2").append($("#dishView").html());
			// }
			
		}
		
		// 将菜品移出订单
		function delDish(){
			if($("#dishNum").val()<=0){
				$("#dishNum").val(0);
			}
		}
		
		// 查看订单栏
		function showDish(){
			$("#dishView2").toggle();
		}
		
	</script>
	<body>
		<div id="dish">
			<div class="div-backgrund">
				<img src="../images/hgsk.jpg" />
			</div>
			<ul class="layui-nav layui-row" style="background-color: white;">
				<li class="layui-col-xs4 layui-nav-item layui-this"><a href="" style=" text-align: center ;font-size: 20px;color: #000000;">点餐</a></li>
				<li class="layui-col-xs4 layui-nav-item"><a href="" style="text-align: center ;font-size: 20px;color: #000000;">套餐</a></li>
				<li class="layui-col-xs4 layui-nav-item"><a href="" style="text-align: center ;font-size: 20px;color: #000000;">评价</a></li>
			</ul>
			<!-- 查询内容的显示区域 -->
			<div id="dishView">

			</div>


		</div>
		<hr />
		<div style="width: 100%; height: 360px;"></div>
		<hr />


		<!-- 订单页面 -->
		<div id="dishView2" style="display: none;">
			<!-- 订单显示区域 -->
			<input id="dishId" style="display: none;" value="1" />
			<div class="layui-row" id="bus-view" style=" height: 150px;  margin-top: 5px; background-color: white;">
				<div class="layui-col-xs4" style="padding-top: 25px; padding-left: 15px;">
					<div class="grid-demo" id="budImg">
						<img src="../images/yrc.jpg" style=" text-align: center; width: 70%;height: 70%;" />
					</div>
				</div>
				<div class="layui-col-xs3">
					<div class="grid-demo " style="margin: 0 auto; text-align: center;margin-top: 25px;">
						<div id="dishName" style="font-size: 24px;">羊肉串</div>
						<div class="layui-icon" style="margin-left: 10px;font-size: 11px;">
							<div id="sales">月销量：500</div>
							<div style="font-size: 20px;">&#xe65e;
								<i id="price">4</i>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs5" style="margin: 0 auto; text-align: center;margin-top: 50px;">
					<div class="mui-numbox">
						<button onclick="delDish()" class="mui-btn mui-btn-numbox-minus" type="button">-</button>
						<input id="dishNum" class="mui-input-numbox" type="number">
						<button onclick="addDish()" class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					</div>
				</div>
			</div>
		</div>


		<div style="width:100%; height: 50px; background-color: #000000; border-radius: 50px;">
			<div class="layui-row">
				<div class="layui-col-xs8 ">
					<div class="grid-demo" style="margin-left: 15px;">
						<button onclick="showDish()" class="layui-btn layui-btn-sm" style=" background-color: #000000; border: 0px; border-radius: 10px;">
							<img src="../images/fanhe.jpg" style="width: 70px;height: 70px;border-radius: 10px;margin-top: -20px;" />
						</button>
					</div>
				</div>
				<div class="layui-col-xs4 " style="float: left">
					<button onclick="toPay()" class="layui-btn" style="width:100%; height: 50px; background-color: #F1C40F; border: 0px; border-radius: 0 10px 10px 0;margin-right: 320px;">
						<i>去结算</i>
					</button>
				</div>
			</div>
		</div>

	</body>
</html>
